<template>
    <div class="main-div">
        <div class="head-div light-blue">
            <div id="search-div">
                <input id="search-input" name="search" v-model.trim="searchKeyword" />
                <button type="button" class="success" id="search-btn" @click="handleSearch">搜索</button>
            </div>
            <div id="action-div">
            <button @click="clickAdd" type="button" class="success" >新增</button>
            <button @click="clickDelete" type="button" class="danger" >删除</button>
            <button @click="clickModify" type="button" class="warning" >修改</button>
        </div>
        </div>
        
        <div class="body-div">
            <ul id="msgList-ul">
                <li @click="clickLi(std)" v-for="(std,index) in studentList" :class="[std.sex=='男'?'male':'female',std.isActive?'active-li':'']">
                    <div class="img-div">
                        <img class="img" :src="'src/assets/img/'+std.pic">
                    </div>
                    <div class="msg-span-div">
                        <span class="num-span">{{std.number}}</span>
                        <span class="name-span">{{ std.name }}</span>
                        <span class="sex-span">{{ std.sex }}</span>
                        <span class="depart-span">{{std.department}}</span>
                        <span class="like-span">
                            <span v-for="(item,indx) in std.hobby">{{ item }}</span>
                        </span>
                    </div>
                </li>
            </ul>
        </div>
        <div v-show="isShowModal" class="modal-div" >
            <form name="msgForm">
                <div id="form-div">
                    <button @click="clickClose" class="modal-close-btn danger" type="button">×</button>
                    <h2 style="margin: 8px; justify-content: center;">学生信息</h2>
                    <div>
                        <label>学号：</label>
                        <div>
                            <input v-model="student.number" type="text" name="number" maxlength="9">
                        </div>
                    </div>
                    <div>
                        <label>姓名：</label>
                        <div>
                            <input v-model="student.name" type="text" name="name">
                        </div>
                    </div>
                    <div>
                        <label>性别：</label>
                        <div>
                            <label>
                                <input v-model="student.sex" type="radio" name="sex" value="男" checked>
                                <span>男</span>
                            </label>
                            <label>
                                <input v-model="student.sex" type="radio" name="sex" value="女">
                                <span>女</span>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label>兴趣爱好：</label>
                        <div>
                            <label v-for="(item,index) in hobbyDict">
                                <input v-model="student.hobby" type="checkbox" name="like" :value="item">
                                <span>{{item}}</span>
                            </label>
                        </div>
                    </div>
                    <div>
                        <label>所属院系：</label>
                        <div>
                            <select v-model="student.department" name="department">
                                <option value="无">无</option>
                                <option v-for="(item,index) in departmentDict" :value="item">{{ item }}</option>                           
                            </select>
                        </div>
                    </div>
                    <div>
                        <label>个人简介：</label>
                        <div>
                            <textarea name="detail" cols="30" rows="4"></textarea>
                        </div>
                    </div>
                    <div>
                        <label>个人主页：</label>
                        <div>
                            <a href="http://baidu.com" target="_blank">个人主页地址</a>
                        </div>
                    </div>
                    <div>
                        <button @click="clickSubmit" type="button" >确定</button>
                        <button type="reset" >重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import  Mock  from 'mockjs';

const hobbyDict=ref(['学习','音乐','读书','运动'])
const departmentDict=ref(['计算机工程系','经济与管理系','土木工程系系','艺术系',])

// let array =Mock.mock({
//     'list|3-7':[{
//         'id+1':1,
//         'number|+1':2220500803,
//         'name':'@cname',
//         'isActive':false,
//         'sex':'@cword("男女")',
//         'department':'@pick('+departmentDict.value+')',
//         'hobby':function(){
//             return Mock.Random.shuffle(hobbyDict.value)
//                 .slice(Math.floor(Math.random()*4),4)
//         },
//         'pic':function(){
//             if(this.sex=='男'){
//                 return Mock.Random.pick(["2.jpg","3.jpg","4.jpg"])
//             }
//             else{
//                 return Mock.Random.pick(['5.jpg','6.jpg','7.jpg'])
//             }
//         }
//     }]
// })

// let studentList=reactive(array)
let studentList=reactive([
    {
        id:1,
        number:2220500803,
        name:'吴宗昌',
        sex:'男',
        department:'计算机工程系',
        hobby:['音乐','运动','读书','学习'],
        pic:'1.jpg',
        isActive:false
    },
    {
        id:2,
        number:2220500804,
        name:'张三',
        sex:'男',
        department:'计算机工程系',
        hobby:['运动','读书','学习'],
        pic:'2.jpg',
        isActive:false
    },
    {
        id:3,
        number:2220500805,
        name:'李四',
        sex:'女',
        department:'计算机工程系',
        hobby:['音乐','学习'],
        pic:'5.jpg',
        isActive:false
    },
])

const reset=()=>{
    return{
        action:null,
        id:null,
        number:null,
        name:null,
        sex:null,
        department:null,
        hobby:[],
        pic:null,
    }
}

let student=reactive(reset)
let isShowModal=ref(false)

const clickLi=(item)=>{
    if(item.isActive){
        item.isActive=false
    }
    else{
        studentList.forEach(s=>{
            s.isActive=false
        })
        item.isActive=true
    }
}

const clickAdd=()=>{
    student=reactive(reset())
    student.action='add'
    isShowModal.value=true
}

const clickModify=()=>{
    let stdList=studentList.filter(item=>{
        if(item.isActive){
            return item
        }
    })
    if(stdList&&stdList.length>0){
        student=reactive({...stdList[0]})
        student.action='modify'
        isShowModal.value=true
        
    }
    else{
        alert('请先选择一个学生卡片')
    }
}

const clickDelete=()=>{
    let stdList=studentList.filter(item=>{
        if(item.isActive){
            return item
        }
    })
    if(stdList&&stdList.length>0){
        student=reactive({...stdList[0]})
        student.action='delete'
        isShowModal.value=true
        
    }
    else{
        alert('请先选择一个学生卡片')
    }
}

const clickClose=()=>{
    student=reactive(reset())
    isShowModal.value=false
}

const clickSubmit=()=>{
    if(student.action=='add'){
        student.id=Math.max(...studentList.map(item=>(item.id)))+1
        student.pic=getPic(student.sex)
        studentList.unshift(student)
    }
    if(student.action=='modify'){
       for(let i=0;i<studentList.length;i++){
            if(studentList[i].id==student.id){
                student.pic=getPic(student.sex)
                studentList[i]=student
            }
       } 
    }
    if(student.action=='delete'){
        const delIndex = studentList.findIndex(item => item.id === student.id)
        if(delIndex !== -1){
            
            studentList.splice(delIndex, 1)
            
            studentList.forEach(item => item.isActive = false)
        }
    }
    
    isShowModal.value=false
}

const getPic=(sex)=>{
    if(sex=='男'){
        let maleArray=['2.jpg','3.jpg','4.jpg']
        return maleArray[Math.floor(Math.random()*3)]
    }
    else{
        let femaleArray=['5.jpg','6.jpg','7.jpg']
        return femaleArray[Math.floor(Math.random()*3)]
    }
}
</script>

<style src="./../assets/css/studentForm.css"></style>
<style src="./../assets/css/studentList.css"></style>